import HighlightArea from "./types/HighlightArea";
import { CSSProperties } from "react";

const normalizeRotation = (rotation: number): number =>
  rotation >= 0 ? rotation : 360 + rotation;

const getCssProperties = (
  area: HighlightArea,
  rotation: number
): CSSProperties => {
  const r = normalizeRotation(rotation);
  const { width, top, left, height } = area;
  switch (r) {
    case 90:
      return {
        height: `${width}%`,
        position: "absolute",
        right: `${top}%`,
        top: `${left}%`,
        width: `${height}%`,
      };
    case 180:
      return {
        bottom: `${top}%`,
        height: `${height}%`,
        position: "absolute",
        right: `${left}%`,
        width: `${width}%`,
      };
    case 270:
      return {
        height: `${width}%`,
        position: "absolute",
        left: `${top}%`,
        bottom: `${left}%`,
        width: `${height}%`,
      };
    case 0:
    case 360:
    default:
      return {
        height: `${height}%`,
        position: "absolute",
        top: `${top}%`,
        left: `${left}%`,
        width: `${width}%`,
      };
  }
};

const transformArea = (
  area: HighlightArea,
  rotation: number
): HighlightArea => {
  const r = normalizeRotation(rotation);
  const { width, height, left, pageIndex, top } = area;
  switch (r) {
    case 90:
      return {
        width: height,
        height: width,
        left: top,
        pageIndex: pageIndex,
        top: 100 - width - left,
      };
    case 180:
      return {
        height: height,
        left: 100 - width - left,
        pageIndex: pageIndex,
        top: 100 - height - top,
        width: width,
      };
    case 270:
      return {
        height: width,
        left: 100 - height - top,
        pageIndex: pageIndex,
        top: left,
        width: height,
      };
    case 0:
    case 360:
    default:
      return area;
  }
};

export { getCssProperties, transformArea };
